<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>摸鱼小屋 -。-</title>
		<link href='https://fonts.googleapis.com/css?family=Raleway:200,400,800' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
		<link rel='stylesheet' href='https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/css/demo.css'>
		<link rel="stylesheet" href="Test1/css/zhuce.css">

	</head>
	<body>
		<div id="large-header" class="large-header">
			<canvas id="demo-canvas"></canvas>
			<div class="center-box">
				<h2>欢迎来到摸鱼小屋</h2>
				<form>
					<input id="username" type="text" placeholder="用户名">
					<input id="password" type="password" placeholder="密码">
					<div>
						<button type="button" onclick="promptRegister()">注册</button>
						<button type="submit" onclick="denglu()"><a id="loginLink" href="#">登录</a></button>
					</div>
				</form>

				<script>
					function promptRegister() {
						var username = prompt("请输入用户名:");
						var password = prompt("请输入密码:");

						if (validateInput(username, password)) {
							// 检查用户名是否已存在
							if (localStorage.getItem(username) !== null) {
								alert("该用户名已被注册，请选择其他用户名！");
							} else {
								// 保存用户名和密码到localStorage中
								localStorage.setItem(username, password);
								alert("注册成功！");
							}
						}
					}

					function denglu() {
						var username = document.getElementById("username").value;
						var password = document.getElementById("password").value;

						// 验证用户名和密码是否匹配
						if (validateInput(username, password)) {
							if (localStorage.getItem(username) === password) {
								alert("登录成功！");
								var loginLink = document.getElementById("loginLink");
								loginLink.href = "./Test1/index.html";
							} else {
								alert("用户名或密码错误！");
							}
						}
					}

					function validateInput(username, password) {
						// 验证用户名和密码是否符合要求
						if (!username || !password) {
							alert("请输入用户名和密码！");
							return false;
						}

						// 检查用户名和密码是否包含非法字符
						var illegalChars = /[^a-zA-Z0-9]/g;
						if (illegalChars.test(username) || illegalChars.test(password)) {
							alert("用户名和密码只能包含字母和数字！");
							return false;
						}

						return true;
					}
				</script>
			</div>
		</div>
		<!-- partial -->
		<script src='https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/js/EasePack.min.js'></script>
		<script src='https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/js/rAF.js'></script>
		<script src='https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/js/TweenLite.min.js'></script>
		<script src="Test1/js/zhuce.js"></script>
	</body>
</html>